<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的Vue页面</title>
    <style>
        .red{
            background: red;
        }
        .green{
            background: green;
        }
    </style>
    <!--导入vue脚本-->
    <script src="js/vue.min.js"></script>
</head>
<body>
    <!--视图 view -->
    <div id="app">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{gender}}</p>
        <!--v-if v-else 做判断 修改dom标签-->
        <h2 v-if="age >= 18">{{name}}是成年人</h2>
        <h2 v-else>{{name}}是未成年人</h2>
        <!--条件成立就显示 通过css样式display -->
        <h1 v-show="gender == '男'">{{name}}是男人</h1>
        <!--v-model做双向绑定-->
        <input type="text" v-model="name"><br>
        <input type="text" v-model="age"><br>
        <input type="text" v-model="gender"><br>
        <hr>
        <!--v-for进行循环-->
        <table border="1px" width="800px">
            <tr><th>名字</th><th>类型</th><th>年龄</th><th>性别</th></tr>
            <tr v-for="pet in pets" v-bind:class="pet.gender == '公的' ? 'red':'green' " v-on:click="show(pet)">
                <td>{{pet.name}}</td>
                <td>{{pet.type}}</td>
                <td>{{pet.age}}</td>
                <td>{{pet.gender}}</td>
            </tr>
        </table>
        <h1>宠物管理</h1>
        名字：<input type="text" v-model="currentPet.name"><br>
        类型：<input type="text" v-model="currentPet.type"><br>
        年龄：<input type="text" v-model="currentPet.age"><br>
        性别：<input type="text" v-model="currentPet.gender"><br>
        <button v-on:click="addPet">添加</button>
        <button v-on:click="updatePet">更新</button>
    </div>

    <script>
        //创建Vue对象 --> viewModel
        new Vue({
            el: "#app", //绑定的标签id
            data:{     //数据 model
                name: "恒哥",
                age: 22,
                gender: "男",
                pets:[
                    {name:"小黑",type:"小黑狗",age:2,gender:"公的"},
                    {name:"小白",type:"小白猫",age:1,gender:"公的"},
                    {name:"小黄",type:"小黄狗",age:1,gender:"母的"},
                    {name:"小灰",type:"小灰鸡",age:1,gender:"母的"}
                ],
                currentPet:{} //当前宠物
            },
            methods:{
                //事件处理方法
                show(pet){
                    //alert('这是' + pet.name + pet.type + pet.age +"岁，是" + pet.gender);
                    this.currentPet = JSON.parse(JSON.stringify(pet));
                },
                updatePet(){
                    //按name找pet对象
                    for(let i = 0;i < this.pets.length;i++){
                        if(this.pets[i].name == this.currentPet.name){
                            //更新宠物信息
                            this.pets[i].age = this.currentPet.age;
                            this.pets[i].gender = this.currentPet.gender;
                            this.pets[i].type = this.currentPet.type;
                            break;
                        }
                    }
                },
                //添加宠物
                addPet(){
                    //调用data中的pets属性
                    //反序列化深克隆对象 JSON.stringify -> 原对象转为json字符串 JSON.parse -> 将json字符串转为对象
                    let pet = JSON.parse(JSON.stringify(this.currentPet));
                    this.pets.push(pet);
                }
            }
        });
    </script>
</body>
</html>
